.self {
    color: var(--modal-foreground);
}

.head {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

.code {
    background: var(--email-verification-email-bg);
    padding: 16px 0 16px 15px;
    margin-top: 15px;
    margin-bottom: 25px;
    color: var(--label);
    font-weight: bold;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;

    >img {
        padding-right: 10px;
    }
}

.register {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;

    .qrcode {
        width: 96px;
        height: 96px;
        padding: 5px;
        background-color: white;

        @media (min-width: 640px) {
            width: 120px;
            height: 120px;
        }
    }

    .url {
        @media (min-width: 640px) {
            height: auto;
        }

        display: flex;
        color: var(--label);
        font-weight: bold;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        background: var(--email-verification-email-bg);
        padding: 10px 0 10px 15px;

        >div {
            word-break: break-all;
        }

        >img {
            padding-right: 10px;
        }
    }
}

.clickable {
    cursor: pointer;
}